<template>
    <nav>
        <div class="banxin nav_box">
            <ul class="xiaobanxin">
                <li class="active" @click="$router.push('/')"><span>推荐</span></li>
                <li @click="$router.push('/phangbang')"><span>排行榜</span></li>
                <li @click="$router.push('/gedan')"><span>歌单</span></li>
                <li @click="$router.push('/diantai')"><span>主播电台</span></li>
                <li @click="$router.push('/geshou')"><span>歌手</span></li>
                <li @click="$router.push('/xindie')"><span>新碟上架</span></li>
            </ul>
        </div>
    </nav>
</template>

<script>
export default {
    data() {
        return {


        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

nav {
    background: #C20C0C;
    height: 35px;
    border-bottom: 1px solid #a40011;
    color: #FFFEFE;
    font-size: 12px;
    box-sizing: border-box;

    .nav_box {
        ul {
            display: flex;
            align-items: center;
            width: 706px;
            margin-left: auto;
            margin-right: auto;
            li {
                padding: 0px 20px;
                margin-top: 10px;
                margin-right: 25px;
                line-height: 20px;
                border-radius: 18px;
                box-sizing: border-box;
                cursor: pointer;

                &:nth-of-type(1) {
                    margin-left: 42px;
                }
                &:hover{
                    background-color: #9B0909;
                }
                &.active {
                    background-color: #9B0909;
                }
            }
        }
    }

}
</style>